import { Image, Tag, Pagination, Collapse } from 'antd'
import './siteOrder.css'
import { useState, useEffect } from 'react'
import FoodOrder from '../order/foodOrder'
import AddressOrder from '../order/addressOrder'
import { storeOrder } from '../../api/api'
function SiteOrder() {
  const [topNumber, setTopNumber] = useState({})
  useEffect(() => {
    getTopNumber()
  }, [])
  // 获取顶部数据
  const getTopNumber = () => {
    storeOrder().then((res) => {
      console.log('用户预订单顶部数据', res)
      setTopNumber(res.data)
    })
  }
  const [active, setActive] = useState(1)
  const handleActive = (e, type) => {
    setActive(type)
  }
  return (
    <div>
      <div className="justify-between  white">
        <div className="top top1">
          <div className="ft18">今日用户预订单</div>
          <div className="ft42">
            {topNumber.todayOrder}
            <span className="ft14">单</span>
          </div>
        </div>
        <div className="top top2">
          <div className="ft18">今日用户预订菜品</div>
          <div className="ft42">
            {topNumber.todayFood}
            <span className="ft14">份</span>
          </div>
        </div>
        <div className="top top3">
          <div className="ft18">历史用户预订单</div>
          <div className="ft42">
            {topNumber.historyOrder}
            <span className="ft14">单</span>
          </div>
        </div>
        <div className="top top4">
          <div className="ft18">历史用户预订菜品</div>
          <div className="ft42">
            {topNumber.historyFood}
            <span className="ft14">份</span>
          </div>
        </div>
      </div>
      <div className="bdl pl8 mt20 ft20 bold">预订单</div>
      <div className="align-center mt20">
        <div
          className={active == 2 ? 'block block1' : 'block block2'}
          onClick={(e) => handleActive(e, 2)}>
          按地址分类
        </div>
        <div
          className={active == 1 ? 'block block1' : 'block block2'}
          onClick={(e) => handleActive(e, 1)}>
          按菜品分类
        </div>
      </div>
      {active == 1 ? (
        <FoodOrder orderType={2}></FoodOrder>
      ) : (
        <AddressOrder orderType={2}></AddressOrder>
      )}

      {/* <Pagination
        total={85}
        showSizeChanger
        showQuickJumper
        showTotal={(total) => `Total ${total} items`}
      /> */}
    </div>
  )
}
export default SiteOrder
